<template>
  <el-aside>
    <el-tree :data="data" @node-contextmenu="floderOption" @node-click="handleNodeClick" node-key="id" draggable>
      <span class="custom-tree-node" slot-scope="{ node, data}">
        <i class="el-icon-folder" style="color:#DFBA49;margin-right:59x"></i>
        <span style="font-size:15px">{{node.label}}</span>
      </span>
    </el-tree>
    <!-- 右键菜单栏 -->
    <el-dialog :visible.sync="optionCardShow" destroy-on-close :show-close="false" :modal="false" custom-class="dialog-class" append-to-body>
      <el-cascader-panel
        :options="options"
        class="panel"
        :style="{
          left: optionCardX + 'px',
          top: optionCardY + 'px'
        }"
        v-show="optionCardShow"
        id="option-button-group"
        :props="cascaderProps"
        @change="onChange"
      >
      </el-cascader-panel>
    </el-dialog>
  </el-aside>
</template>

<script>
  export default {
    name: 'testIndex',

    data() {
      return {
        optionCardX: 0,
        optionCardY: 0,
        optionCardShow: false,
        optionData: [],
        clickNode: 0,
        node: null,
        tree: null,
        id: 0,//全局文件id
        data: [{
          id: 1,
          label: '主页',
        }],

        options: [{
          value: 'add',
          label: '添加',
          children: [
            {
              value: 'theme',
              label: '主题'
            },
            {
              value: 'unshift',
              label: '上方添加子主题'
            },
            {
              value: 'push',
              label: '下方添加子主题'
            },
            {
              value: 'children',
              label: '子主题'
            }
          ]
        },
        {
          value: 'move',
          label: '移动',
          children: [
            {
              value: 'moveup',
              label: '上移'
            },
            {
              value: 'movedown',
              label: '下移'
            },
            {
              value: 'downgrade',
              label: '降级'
            },
            {
              value: 'upgrade',
              label: '升级'
            }
          ]
        },{
          value: 'del',
          label: '删除'
        },{
          value: 'rename',
          label: '重命名'
        }]
      }
    },

    computed: {
      cascaderProps() {
        return {
          label: 'label',
          value: 'value',
          expandTrigger: 'hover',
          emitPath: false,
          checkStrictly: false
        }
      }
    },

    methods: {
      // 右键菜单属性设置
      floderOption(e, data, n, t) {
        // this.optionCardShow = false
        this.optionCardX = e.x
        this.optionCardY = e.y
        this.optionData = data
        this.node = n
        this.tree = t
        this.optionCardShow = true
      },

      // 点击框外区域 隐藏菜单--未使用
      // OptionCardClose(event) {
      //   var currentCli = document.getElementById("option-button-group");
      //   if (currentCli) {
      //     if (!currentCli.contains(event.target)) { //点击到了id为option-button-group以外的区域，就隐藏菜单
      //       this.optionCardShow = false;
      //     }
      //   }
      // },

      // 创建
      append() {
        this.optionCardShow = false
        if (this.node.level >= 3) {
          this.$message.error("最多只⽀持三级！")
          return false;
        }
        this.$prompt('请输⼊⽂件名', '提⽰', { // 弹出框⽤于输⼊⽂件名
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^\S{1,10}$/,
          inputErrorMessage: '命名不合法，请重新命名'
        }).then(({
          value
        }) => {
          const newChild = { // 新建⼀个⼦节点
            id: this.id++,
            label: value,
            children: []
          };

          // TODO 测试修改
          //测试，在树形控件下方显示创建后的内容
          const newSet = {
            id: this.id++,
            name: value
          }
          if (!this.optionData.children) { // 如果当前节点没有⼦节点，那就新建⼀个空的⼦节点数组，⽤来存放新建⼦⽂件夹
            this.$set(this.optionData, 'children', [])
          }
          this.optionData.children.push(newChild); // 插⼊
          //同时展开节点
          if (!this.node.expanded) {
            this.node.expanded = true
          }
          this.$message({
            type: 'success',
            message: '⽂件新建成功！'
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '创建失败'
          // });
        });
      },

      // 删除
      remove() {
        this.optionCardShow = false
        this.$confirm('此操作将永久删除该⽂件, 是否继续?', '提⽰', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const parent = this.node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === this.data.id);
          children.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '已取消删除'
          // });
        });
      },

      // 重命名
      rename() {
        console.log(3)
        this.optionCardShow = false
        this.$prompt('请输⼊新⽂件名', '提⽰', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: this.node.data.label,
          inputPattern: /^\S{1,10}$/,
          inputErrorMessage: '⽂件名长度在1到10之间'
        }).then(({
          value
        }) => {
          this.node.data.label = value
          this.$message({
            type: 'success',
            message: '⽂件夹已重命名！'
          });
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消输⼊'
          // });
        });
      },

      //节点点击 - 确定选中节点的id
      handleNodeClick(item, data) {
        // this.test(data)
        this.clickNode = data.id
      },

      onChange(val) {
        console.log(val)
        if(val === 'theme' || val === 'unshift' || val === 'push' || val === 'children') {
          this.append()
        } else if(val === 'moveup' || val === 'movedown' || val === 'downgrade' || val === 'upgrade' ) {

        } else if(val === 'del') {
          this.remove()
        } else if(val === 'rename') {
          this.rename()
        } else {

        }
        this.optionCardShow = false
      }
    }
  }
</script>

<style scoped lang="scss">

  // .option-card-button {
  //   width: 100%;
  //   margin-left: 0;
  //   font-size: 10px;
  //   border-radius: 0;
  // }

  /deep/.dialog-class {
    background-color: transparent;
    box-shadow: none;
  }

  .panel {
    z-index: 999;
    position: fixed;
    // width: 100px;
    background: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
</style>
